<template>
    <div id="app">
        <div class="table-wraper">
            <div class="search">
                <div class="selectControl">
                    <el-select v-model="searcSelect" clearable placeholder="请选择检索类型">
                        <el-option v-for="item in searchList" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-button type="primary" @click='checkUserList(1)'>检索</el-button>
                </div>
                <div class="selectOption">
                    <el-input v-model="nickNameCheck" placeholder="按昵称检索" v-show="checkRadioType1"></el-input>
                    <el-date-picker v-model="registerDateCheck" :editable='false' type="date" placeholder="按注册日期检索" :picker-options="pickerOptions0" class='registerDateCheck' v-show="checkRadioType1"></el-date-picker>
                    <el-cascader v-model="selectedOptions" expand-trigger="hover" :options="addressData" class='el-input' v-show="checkRadioType1" clearable placeholder="按地址检索"></el-cascader>
                    <el-input v-model="accountCheck" placeholder="按账号检索" class='accountCheck' v-show="checkRadioType1"></el-input>
                    <el-date-picker v-model="loginTime" :editable='false' type="date" placeholder="按上次登录时间检索" :picker-options="pickerOptions0" v-show="checkRadioType2"></el-date-picker>
                    <el-input v-model="inviteNum" placeholder="按邀请人数检索" v-show="checkRadioType3"></el-input>
                </div>
            </div>
            <div class="main">
                <ul class="listTitle">
                    <li v-for='item in titleList'>{{item.label}}</li>
                </ul>
                <ul class="dataList" v-for='(item,index) in tableData'>
                    <li>{{index+1}}</li>
                    <li>
                        <img :src='item.imgPath' alt="">
                        <span @click='showUserInfo(index)'>{{item.nickname}}</span>
                    </li>
                    <li>{{item.name}}</li>
                    <li>{{item.sex}}</li>
                    <li>{{item.account}}</li>
                    <li>{{item.integration}}</li>
                    <li>{{item.level}}</li>
                    <li>
                        <span @click='showUserBill(index)'>{{item.money}}</span>
                    </li>
                    <li>{{item.address}}</li>
                    <li>
                        <el-button type="danger" v-show='item.status == 0' @click='disableAndEnable(index)'>封停</el-button>
                        <el-button type="success" v-show='item.status == 1' @click='disableAndEnable(index)'>解封</el-button>
                    </li>
                </ul>
            </div>
            <div class="block pagination" v-show='nullContentPagination'>
                <el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="10" layout="prev, pager, next, jumper" :total="total"></el-pagination>
            </div>
            <div class="nullContent" v-show='nullContent'>暂无数据</div>
        </div>
        <div class="bomb userInfo" v-show='userInfo'>
            <div class="bomb_header">
                <p>用户详情</p>
                <span @click="hideUserInfo()">
                        <img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10">
                        </span>
            </div>
            <div class="bomb_content">
                <div class="userDetial">
                    <p v-for='(item,index) in userDetial'>{{item.label}}:
                        <span @click='openInviteBox'>{{item.val}}</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="bomb userBill" v-show='userBill'>
            <div class="bomb_header">
                <p>用户账单</p>
                <span @click="hideUserInfo()"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
            </div>
            <div class="bomb_content">
                <div class="billCheck">
                    <el-button type="primary" class='checkOption checkButton' @click='checkBill'>筛选</el-button>
                    <el-select v-model="payType" clearable placeholder="支出类型" class='checkOption'>
                        <el-option v-for="item in payTypeList" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <el-select v-model="inCome" clearable placeholder="收益类型" class='checkOption'>
                        <el-option v-for="item in inComeList" :label="item.label" :value="item.value"></el-option>
                    </el-select>
                    <div class="block checkOption  el-select">
                        <el-date-picker v-model="endDate" type="date" placeholder="结束日期" :picker-options="pickerOptions0" :editable='false'></el-date-picker>
                    </div>
                    <div class="block checkOption  el-select">
                        <el-date-picker v-model="starDate" type="date" placeholder="开始日期" :picker-options="pickerOptions0" :editable='false'></el-date-picker>
                    </div>
                    <div class="clear"></div>
                </div>
                <ul class="billList">
                    <li v-for='item in billTitle'>{{item.label}}</li>
                </ul>
                <div class="bill">
                    <ul class="billDetialList" v-for='item in billDetial'>
                        <li>{{item.subjects}}</li>
                        <li :class='{lossMoney:item.type==1}'>{{item.money}}</li>
                        <li>{{item.createDate}}</li>
                    </ul>
                    <div class="nullContent" v-show='nullContent'>暂无数据</div>
                </div>
            </div>
        </div>
        <div class="bomb inviteBox" v-show='isInviteShow'>
            <div class="bomb_header">
                <p>邀请统计</p>
                <span @click="hideInviteBox()"><img src="../../assets/images/icon_tanc_close@2x.png" width="10px" height="10"></span>
            </div>
            <div class="bomb_content">
                <p>总邀请人数：
                    <span>{{allInviteNum}}</span>激活人数：
                    <span>{{activateNum}}</span>未激活人数：
                    <span>{{unActivateNum}}</span>
                </p>
                <div>
                    <ul class="invite-header">
                        <li v-for='item in inviteList'>{{item.label}}</li>
                    </ul>
                    <div class="inviteListBox">
                        <ul class="invite-list" v-for='(item,index) in inviteData'>
                            <li>{{index+1}}</li>
                            <li>
                                <span>{{item.userAccount}}</span>
                            </li>
                            <li>{{item.invitedTime|formatDate}}</li>
                            <li>{{item.status|formatType}}</li>
                        </ul>
                        <div class="nullContent" v-show='nullContent'>暂无数据</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layer" v-show='layer'></div>
    </div>
</template>
<script>
    import {
        mapActions,
        mapState
    } from 'vuex'
    import addressData from '../../assets/js/addressData.js'
    function formatData(data) {
        return data
    }
    export default {
        data() {
            return {
                searchList: this.$store.state.userList.searchList,
                inviteList: this.$store.state.userList.inviteList,
                titleList: this.$store.state.userList.titleList,
                inComeList: this.$store.state.userList.inComeList,
                payTypeList: this.$store.state.userList.payTypeList,
                billTitle: this.$store.state.userList.billTitle,
                tableData: [],
                userDetial: [],
                inviteData: [],
                billDetial: [],
                selectedOptions: [],
                currentPage: 1,
                addressData: formatData(addressData),
                total: 0,
                nickNameCheck: '',
                registerDateCheck: '',
                accountCheck: '',
                loginTime: '',
                inviteNum: '',
                checkRadioType1: false,
                checkRadioType2: false,
                checkRadioType3: false,
                nullContent: false,
                nullContentPagination: true,
                userInfo: false,
                isInviteShow: false,
                layer: false,
                userBill: false,
                selectIndex: '',
                starDate: '',
                endDate: '',
                inCome: '',
                payType: '',
                searcSelect: '',
                constUid: '',
                listType: 0,
                allInviteNum: '',
                activateNum: '',
                unActivateNum: '',
                pickerOptions0: {
                    disabledDate(time) {
                        return time.getTime() > Date.now()
                    }
                }
            }
        },
        watch: {
            searcSelect: function(val) {
                if (val == 1) {
                    this.checkRadioType1 = true;
                    this.checkRadioType2 = false;
                    this.checkRadioType3 = false;
                    this.loginTime = '';
                    this.inviteNum = ''
                } else if (val == 2) {
                    this.checkRadioType1 = false;
                    this.checkRadioType2 = true;
                    this.checkRadioType3 = false;
                    this.nickNameCheck = '';
                    this.registerDateCheck = '';
                    this.locationCheck = '';
                    this.accountCheck = '';
                    this.inviteNum = ''
                } else if (val == 3) {
                    this.checkRadioType1 = false;
                    this.checkRadioType2 = false;
                    this.checkRadioType3 = true;
                    this.nickNameCheck = '';
                    this.registerDateCheck = '';
                    this.locationCheck = '';
                    this.accountCheck = '';
                    this.loginTime = ''
                } else {
                    this.checkRadioType1 = false;
                    this.checkRadioType2 = false;
                    this.checkRadioType3 = false;
                    this.loginTime = '';
                    this.inviteNum = '';
                    this.nickNameCheck = '';
                    this.registerDateCheck = '';
                    this.locationCheck = '';
                    this.accountCheck = ''
                }
            }
        },
        methods: {
            getUser(list) {
                this.$store.commit('showLoading');
                this.getUserInfoList(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.nullContent = false;
                        this.nullContentPagination = true;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.total = data.data.count;
                        for (let i = 0; i < data.data.list.length; i++) {
                            data.data.list[i].sex = data.data.list[i].sex == 'm' ? '男' : '女';
                            data.data.list[i].imgPath = data.data.list[i].imgPath == '' ? '../static/img/avatar5.png' : data.data.list[i].imgPath;
                            data.data.list[i].money = data.data.list[i].money.toFixed(2);
                            data.data.list[i].status = Number(data.data.list[i].status)
                        }
                        this.tableData = data.data.list
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            getUserByLogin(list) {
                this.$store.commit('showLoading');
                this.getUserListByLoginTime(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.nullContent = false;
                        this.nullContentPagination = true;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.total = data.data.count;
                        for (let i = 0; i < data.data.list.length; i++) {
                            data.data.list[i].sex = data.data.list[i].sex == 'm' ? '男' : '女';
                            data.data.list[i].imgPath = data.data.list[i].imgPath == '' ? '../static/img/avatar5.png' : data.data.list[i].imgPath;
                            data.data.list[i].money = data.data.list[i].money.toFixed(2);
                            data.data.list[i].status = Number(data.data.list[i].status)
                        }
                        this.tableData = data.data.list
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            getUserByInvite(list) {
                this.$store.commit('showLoading');
                this.getUserListByInvite(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.nullContent = false;
                        this.nullContentPagination = true;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                            this.nullContentPagination = false;
                            this.tableData = data.data.list;
                            return;
                        }
                        this.total = data.data.count;
                        for (let i = 0; i < data.data.list.length; i++) {
                            data.data.list[i].sex = data.data.list[i].sex == 'm' ? '男' : '女';
                            data.data.list[i].imgPath = data.data.list[i].imgPath == '' ? '../static/img/avatar5.png' : data.data.list[i].imgPath;
                            data.data.list[i].money = data.data.list[i].money.toFixed(2);
                            data.data.list[i].status = Number(data.data.list[i].status)
                        }
                        this.tableData = data.data.list
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            checkUserList(i) {
                this.currentPage = 1;
                this.listType = 2;
                let checkType = this.searcSelect;
                let token = sessionStorage.token;
                let postData = {
                    pageNo: i,
                    pageSize: 10,
                    token: token,
                    code: 'com_sxluckyking_appManage',
                    jsonFilter: {}
                }
                if (checkType === '') {
                    this.$message.warning('请选择检索类型!')
                } else {
                    if (checkType == 1) {
                        if (/[^0-9]/.test(this.accountCheck)) {
                            this.$message.warning('账号只能是数字!');
                            return
                        }
                        if (this.nickNameCheck != '') {
                            postData.jsonFilter.nickName = this.nickNameCheck
                        }
                        if (this.registerDateCheck != '') {
                            postData.jsonFilter.createDate = this.UnFormatDate(this.registerDateCheck) + ' 00:00:00';
                            postData.jsonFilter.endCreateDate = this.UnFormatDate(this.registerDateCheck) + ' 23:59:59'
                        }
                        if (this.registerDateCheck == undefined) {
                            delete postData.jsonFilter.endCreateDate
                            delete postData.jsonFilter.createDate
                        }
                        if (this.selectedOptions != '') {
                            postData.jsonFilter.address = this.selectedOptions[1]
                        }
                        if (this.accountCheck != '') {
                            postData.jsonFilter.account = this.accountCheck
                        }
                        postData.jsonFilter = JSON.stringify(postData.jsonFilter);
                        this.getUser(postData)
                    } else if (checkType == 2) {
                        if (this.loginTime != '' && this.loginTime != undefined) {
                            postData.jsonFilter.createDate = this.UnFormatDate(this.loginTime) + ' 00:00:00';
                            postData.jsonFilter.endCreateDate = this.UnFormatDate(this.loginTime) + ' 23:59:59'
                        } else {
                            this.$message.warning('请选择登录时间!');
                            return
                        }
                        if (this.registerDateCheck == undefined) {
                            delete postData.jsonFilter.endCreateDate
                            delete postData.jsonFilter.createDate
                        }
                        postData.jsonFilter = JSON.stringify(postData.jsonFilter);
                        this.getUserByLogin(postData)
                    } else if (checkType == 3) {
                        if (this.inviteNum == '' || /[^0-9]/.test(this.inviteNum)) {
                            this.$message.warning('请输入邀请人数!');
                            return
                        } else {
                            postData.count = this.inviteNum
                        }
                        this.getUserByInvite(postData)
                    }
                }
            },
            disableAndEnable(i) {
                this.$store.commit('showLoading');
                let list = {
                    code: 'com_sxluckyking_appManage',
                    token: sessionStorage.token,
                    id: this.tableData[i].uid,
                    account: this.tableData[i].account,
                    status: this.tableData[i].status = this.tableData[i].status == 0 ? 1 : 0
                }
                this.setUserDisableOrEnable(list).then((data) => {
                    this.$store.commit('hiddenLoading');
                    console.log(data);
                    if (data.code === 200) {
                        this.$message.success('操作成功!')
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                let token = sessionStorage.token;
                let list = {
                    pageSize: 10,
                    pageNo: val,
                    code: 'com_sxluckyking_appManage',
                    token: token
                };
                if (this.listType == 1) {
                    this.getUser(list)
                } else if (this.listType == 2) {
                    this.checkUserList(val)
                }
            },
            showUserInfo(i) {
                this.userDetial = [{
                    label: '用户昵称',
                    val: this.tableData[i].nickname
                }, {
                    label: '姓名',
                    val: this.tableData[i].name
                }, {
                    label: '性别',
                    val: this.tableData[i].sex
                }, {
                    label: '账号',
                    val: this.tableData[i].account
                }, {
                    label: '经验值',
                    val: this.tableData[i].integration
                }, {
                    label: '等级',
                    val: this.tableData[i].level
                }, {
                    label: '余额',
                    val: this.tableData[i].money
                }, {
                    label: '所在地',
                    val: this.tableData[i].address
                }, {
                    label: '生日',
                    val: this.tableData[i].birthday
                }, {
                    label: '职业',
                    val: this.tableData[i].profession
                }, {
                    label: '兴趣',
                    val: this.tableData[i].interest
                }, {
                    label: '收益',
                    val: this.tableData[i].privateIncome.toFixed(2)
                }, {
                    label: '注册时间',
                    val: this.formatDate(this.tableData[i].createDate)
                }, {
                    label: '邀请人数',
                    val: this.tableData[i].invitedNum
                }, {
                    label: '邀请码',
                    val: this.tableData[i].invitedCode
                }, {
                    label: '我的邀请人',
                    val: this.tableData[i].invitedPeople
                }, {
                    label: '上次登录时间',
                    val: this.formatDate(this.tableData[i].loginTime)
                }];
                this.userInfo = this.layer = true;
                this.selectIndex = i
            },
            hideUserInfo() {
                this.userInfo = this.userBill = this.layer = false;
                this.nullContent = false;
            },
            showUserBill(i) {
                let uid = this.tableData[i].uid;
                this.constUid = this.tableData[i].uid;
                this.loadBill(uid);
                this.userBill = this.layer = true;
            },
            hideUserBill() {
                this.userBill = this.layer = false
            },
            checkBill() {
                let uid = this.constUid,
                    createDate = this.starDate,
                    endCreateDate = this.endDate,
                    inSubjects = this.inCome,
                    outSubjects = this.payType;
                this.loadcheckBill(uid, createDate, endCreateDate, inSubjects, outSubjects)
            },
            loadBill(uid) {
                this.getUserCount({
                    userId: uid
                }).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        let getData = data.data;
                        this.nullContent = false;
                        if (getData.length == 0) {
                            this.nullContent = true;
                            this.billDetial = getData
                            return;
                        }
                        for (let i = 0; i < getData.length; i++) {
                            getData[i].createDate = this.formatDate(getData[i].createDate);
                            let type = Number(getData[i].subjects);
                            switch (type) {
                                case 1:
                                    getData[i].subjects = '系统红包收益'
                                    break;
                                case 2:
                                    getData[i].subjects = '个人红包收益'
                                    break;
                                case 3:
                                    getData[i].subjects = '邀请好友返利'
                                    break;
                                case 4:
                                    getData[i].subjects = '系统奖励'
                                    break;
                                case 5:
                                    getData[i].subjects = '发出的红包'
                                    getData[i].money = -getData[i].money;
                                    getData[i].type = 1;
                                    break;
                                case 6:
                                    getData[i].subjects = '提现'
                                    getData[i].money = -getData[i].money;
                                    getData[i].type = 1;
                                    break;
                                case 7:
                                    getData[i].subjects = '完成个人信息奖励'
                                    break;
                                case 8:
                                    getData[i].subjects = '兑换奖励'
                                    break;
                                case 9:
                                    getData[i].subjects = '分享收益'
                                    break;
                                case 10:
                                    getData[i].subjects = '紅包金額退回'
                                    break
                            }
                        }
                        this.billDetial = getData
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            loadcheckBill(uid, createDate, endCreateDate, inSubjects, outSubjects) {
                let list = {};
                list.userId = uid;
                if (createDate != '' && endCreateDate != '') {
                    if (Date.parse(new Date(createDate)) > Date.parse(new Date(endCreateDate))) {
                        this.$message('结束时间不能小于开始时间!');
                        return
                    } else {
                        list.createDate = this.UnFormatDate(createDate);
                        list.endCreateDate = this.UnFormatDate(endCreateDate)
                    }
                }
                if (inSubjects != '') {
                    list.inSubjects = inSubjects
                }
                if (outSubjects != '') {
                    list.outSubjects = outSubjects
                }
                this.getUserCount(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        let getData = data.data;
                        this.nullContent = false;
                        if (getData.length == 0) {
                            this.nullContent = true;
                            this.billDetial = getData
                            return;
                        }
                        for (let i = 0; i < getData.length; i++) {
                            getData[i].createDate = this.formatDate(getData[i].createDate);
                            let type = Number(getData[i].subjects);
                            switch (type) {
                                case 1:
                                    getData[i].subjects = '系统红包收益'
                                    break;
                                case 2:
                                    getData[i].subjects = '个人红包收益'
                                    break;
                                case 3:
                                    getData[i].subjects = '邀请好友返利'
                                    break;
                                case 4:
                                    getData[i].subjects = '系统奖励'
                                    break;
                                case 5:
                                    getData[i].subjects = '发出的红包'
                                    getData[i].money = -getData[i].money;
                                    getData[i].type = 1;
                                    break;
                                case 6:
                                    getData[i].subjects = '提现'
                                    getData[i].money = -getData[i].money;
                                    getData[i].type = 1;
                                    break;
                                case 7:
                                    getData[i].subjects = '完成个人信息奖励'
                                    break;
                                case 8:
                                    getData[i].subjects = '兑换奖励'
                                    break;
                                case 9:
                                    getData[i].subjects = '分享收益'
                                    break;
                                case 10:
                                    getData[i].subjects = '紅包金額退回'
                                    break
                            }
                        }
                        this.billDetial = getData
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            openInviteBox() {
                let num = this.tableData[this.selectIndex].invitedNum;
                if (num > 0) {
                    this.isInviteShow = true;
                    this.getInvite();
                }
            },
            hideInviteBox() {
                this.isInviteShow = false;
                this.nullContent = false;
            },
            getInvite() {
                let list = {
                    token: sessionStorage.token,
                    parentId: this.tableData[this.selectIndex].uid,
                    pageNo: 1,
                    pageSize: 9999
                }
                this.getInviteInfo(list).then((data) => {
                    console.log(data);
                    if (data.code === 200) {
                        this.nullContent = false;
                        if (data.data.list.length == 0) {
                            this.nullContent = true;
                        } else {
                            this.allInviteNum = data.data.count;
                            this.activateNum = data.data.activate;
                            this.unActivateNum = data.data.unActivate;
                            this.inviteData = data.data.list;
                        }
                    } else {
                        this.$message(data.message)
                    }
                }).catch(msg => console.log(msg))
            },
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '-'
                } else {
                    let y, m, d, h, i, s, t = new Date(parseInt(date));
                    y = t.getFullYear();
                    m = t.getMonth() + 1;
                    d = t.getDate();
                    h = t.getHours();
                    i = t.getMinutes();
                    s = t.getSeconds();
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
                }
            },
            UnFormatDate(date) {
                return new Date(date).toLocaleString().split(' ')[0].replace(/\//g, '-')
            },
            ...mapActions(['getUserInfoList', 'getUserCount', 'getUserListByLoginTime', 'getUserListByInvite', 'setUserDisableOrEnable', 'getInviteInfo'])
        },
        created: function() {
            this.listType = 1;
            let token = sessionStorage.token;
            let list = {
                pageSize: 10,
                pageNo: 1,
                code: 'com_sxluckyking_appManage',
                token: token
            };
            this.getUser(list)
        },
        filters: {
            formatDate(date) {
                if (date == null || date == '' || date == undefined) {
                    return '-'
                } else {
                    let y, m, d, h, i, s, t = new Date(parseInt(date));
                    y = t.getFullYear();
                    m = t.getMonth() + 1;
                    d = t.getDate();
                    h = t.getHours();
                    i = t.getMinutes();
                    s = t.getSeconds();
                    return y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' ' + (h < 10 ? '0' + h : h) + ':' + (i < 10 ? '0' + i : i) + ':' + (s < 10 ? '0' + s : s)
                }
            },
            formatType(val) {
                return val == 1 ? '激活' : '未激活'
            }
        },
    }
</script>
<style scoped>
    #app {
        position: relative
    }
    .table-wraper {
        width: 100%;
        height: 100%;
        background-color: #fff;
        border-radius: 5px
    }
    .search {
        width: 100%;
        padding: 6px 20px 0 0;
        background-color: #efefef;
        height: 48px;
        margin-bottom: 10px
    }
    .selectOption,
    .selectControl {
        float: right;
        text-align: right
    }
    .selectOption {
        padding-right: 10px
    }
    .search .checkRadio {
        float: left;
        width: 410px;
        text-align: left
    }
    .checkRadio ul {
        display: inline-block;
        height: 35px;
        line-height: 35px
    }
    .checkRadio li {
        float: left
    }
    .el-input {
        width: 180px
    }
    .locationCheck {
        width: 200px;
        margin-top: 3px
    }
    .inviteListBox {
        position: absolute;
        top: 90px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: scroll
    }
    .inviteBox .bomb_content {
        height: 452px
    }
    .userInfo {
        height: 435px;
        width: 650px;
    }
    .userInfo .bomb_content {
        height: 390px;
        border: none
    }
    .userInfo p {
        margin: 0;
    }
    .userDetial {
        width: 100%;
        height: 100%
    }
    .userBill {
        width: 907px
    }
    .userBill .bomb_content {
        height: 452px
    }
    .userBill .el-date-editor.el-input {
        width: 150px
    }
    .userBill .el-select {
        margin-right: 10px
    }
    .userDetial p {
        width: 46%;
        float: left;
        font-size: 15px;
        padding: 10px 0 10px 50px;
        text-align: left;
        color: #1F2D3D;
    }
    .userDetial p span {
        color: #324057;
    }
    .billCheck {
        margin-top: 10px
    }
    .checkOption {
        float: right
    }
    .checkButton {
        margin: 2px 0 0 5px
    }
    .bill {
        position: absolute;
        top: 96px;
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        font-size: 14px;
        color: #1f2d3d;
        background-color: #fff;
        box-sizing: border-box;
        text-align: center
    }
    .billList {
        margin-top: 10px;
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #000;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        border: 1px solid#dddddd;
        background-color: #fafafa;
        box-sizing: border-box
    }
    .billDetialList {
        width: 50%;
        overflow: hidden;
        border-bottom: 1px solid#dfe6ec;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        float: left;
        border-right: 1px solid#dfe6ec;
        border-left: 1px solid#dfe6ec
    }
    .billDetialList:nth-child(2n) {
        border-left: none
    }
    .billList li,
    .billDetialList li {
        float: left
    }
    .billList li:nth-child(1),
    .billList li:nth-child(3),
    .billList li:nth-child(4),
    .billList li:nth-child(6) {
        width: 20%
    }
    .billList li:nth-child(2),
    .billList li:nth-child(5) {
        width: 10%
    }
    .billList li:nth-child(6) {
        border-right: none
    }
    .billDetialList li:nth-child(1) {
        width: 40%
    }
    .billDetialList li:nth-child(2) {
        width: 20%
    }
    .billDetialList li:nth-child(3) {
        width: 40%;
        border-right: none
    }
    .billClose {
        position: absolute;
        left: 50%;
        bottom: 10px;
        margin-left: -30px
    }
    .el-date-editor .el-input {
        width: 200px
    }
    ul {
        margin: 0
    }
    .el-button+.el-button {
        margin: 0
    }
    .userDetial p:nth-child(14) span {
        cursor: pointer;
        color: rgb(0, 160, 233)
    }
    .lossMoney {
        color: red
    }
    .inviteBox {
        width: 700px
    }
    .inviteBox p {
        margin: 0;
        height: 50px;
        line-height: 50px;
        text-align: left;
        padding-left: 20px;
        font-size: 16px
    }
    .invite-header {
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #000;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
        border: 1px solid#dddddd;
        background-color: #fafafa;
        box-sizing: border-box
    }
    .invite-list {
        width: 100%;
        height: 48px;
        line-height: 48px;
        color: #333333;
        font-size: 14px;
        text-align: center;
        box-sizing: border-box;
        border-bottom: 1px solid#dddddd;
        border-left: 1px solid#dddddd;
        border-right: 1px solid#dddddd
    }
    .invite-header li,
    .invite-list li {
        float: left
    }
    .invite-header li:nth-child(1),
    .invite-list li:nth-child(1) {
        width: 10%
    }
    .invite-header li:nth-child(2),
    .invite-list li:nth-child(2) {
        width: 30%
    }
    .invite-header li:nth-child(3),
    .invite-list li:nth-child(3) {
        width: 40%
    }
    .invite-header li:nth-child(4),
    .invite-list li:nth-child(4) {
        width: 20%
    }
    .inviteBox span {
        margin-right: 40px
    }
    .listTitle li:nth-child(1),
    .dataList li:nth-child(1) {
        width: 4%
    }
    .listTitle li:nth-child(2),
    .dataList li:nth-child(2) {
        width: 16%
    }
    .dataList li:nth-child(2) {
        cursor: pointer;
        padding: 0 0 0 10px;
        color: #35C885;
        text-align: left
    }
    .listTitle li:nth-child(3),
    .dataList li:nth-child(3) {
        width: 11%
    }
    .listTitle li:nth-child(4),
    .dataList li:nth-child(4) {
        width: 6%
    }
    .listTitle li:nth-child(5),
    .dataList li:nth-child(5) {
        width: 10%
    }
    .listTitle li:nth-child(6),
    .dataList li:nth-child(6) {
        width: 10%
    }
    .listTitle li:nth-child(7),
    .dataList li:nth-child(7) {
        width: 9%
    }
    .dataList li:nth-child(8) {
        color: #35C885;
        cursor: pointer
    }
    .listTitle li:nth-child(8),
    .dataList li:nth-child(8) {
        width: 10%
    }
    .listTitle li:nth-child(9),
    .dataList li:nth-child(9) {
        width: 8%
    }
    .listTitle li:nth-child(10),
    .dataList li:nth-child(10) {
        width: 16%;
        border: none
    }
</style>
